<template>
  <el-container>
    <el-header v-if="detailStatus">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="nickname">
          <el-input v-model="queryData.merchantName" placeholder="商户名称" style="width: 120px;" />
        </el-form-item>
        <!-- <el-form-item>
          <span>是否赠送：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <span>默认门店：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <span>创建时间：</span>
          <el-date-picker
            v-model="setUpTime"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="detailStatus">
      <el-table :data="pageTableData" border size="small" max-height="700">
        <el-table-column v-if="show" label="平台会员id" prop="id" header-align="center" align="center" width="65" />
        <el-table-column label="商户名称" prop="nickname" header-align="center" align="center" width="120" />
        <el-table-column label="默认金额一" prop="defaultAmtFirst" header-align="center" align="center" width="120" />
        <el-table-column label="赠送金额" prop="giveAmtFirst" header-align="center" align="center" width="80" />
        <el-table-column label="默认金额二" prop="defaultAmtSecond" header-align="center" align="center" width="120" />
        <el-table-column label="赠送金额" prop="giveAmtSecond" header-align="center" align="center" width="80" />
        <el-table-column label="默认金额三" prop="defaultAmtThird" header-align="center" align="center" width="120" />
        <el-table-column label="赠送金额" prop="giveAmtThird" header-align="center" align="center" width="80" />
        <el-table-column label="默认门店" prop="shopName" header-align="center" align="center" width="80" />
        <el-table-column label="是否引导注册充值" prop="guideFlag" header-align="center" align="center" width="80" >
          <template slot-scope="scope">
　　　　　　　<span v-if="!scope.row.guideFlag">否</span>
　　　　　　　<span v-if="scope.row.guideFlag">是</span>
　　　　　</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" width="160" />
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="queryCard(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="detailStatus" style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
    <el-form class="detailForm" v-if="!detailStatus" label-position="right" style="background-color:rgb(231, 231, 231)" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <div>
        <span class="title">储值金额设定(元)</span>
        <el-row>
          <el-col>
            <el-form-item label="默认金额1" prop="defaultAmt1">
              <el-input v-model="ruleForm.cardConfigDetail[0].defaultAmt" placeholder="输入金额1" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="默认金额2" prop="defaultAmt2">
              <el-input v-model="ruleForm.cardConfigDetail[1].defaultAmt" placeholder="输入金额2" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="默认金额3" prop="defaultAmt3">
              <el-input v-model="ruleForm.cardConfigDetail[2].defaultAmt" placeholder="输入金额3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="赠送金额1" prop="giveAmt1">
              <el-input v-model="ruleForm.cardConfigDetail[0].giveAmt" placeholder="输入金额1" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="赠送金额2" prop="giveAmt2">
              <el-input v-model="ruleForm.cardConfigDetail[1].giveAmt" placeholder="输入金额2" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="赠送金额3" prop="giveAmt3">
              <el-input v-model="ruleForm.cardConfigDetail[2].giveAmt" placeholder="输入金额3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="是否引导注册充值" prop="guideFlag" label-width="130px">
              <el-select v-model="ruleForm.guideFlag" placeholder="">
                <el-option label="是" value="true" />
                <el-option label="否" value="false" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <span class="title">默认门店设置</span>
        <el-row>
          <el-col>
            <el-form-item label="请选择默认门店" prop="shopCode" label-width="130px">
              <el-select v-model="ruleForm.shopCode" placeholder="">
                <el-option label="是" value="true" />
                <el-option label="否" value="false" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <span class="title">会员密码管理</span>
        <el-row>
          <el-col>
            <el-form-item label="设置密码">
              <el-input v-model="ruleForm.password" placeholder="0" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="输入验证码">
              <el-input v-model="ruleForm.verifyCode" placeholder="0" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">获取验证码</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <span class="title">操作记录</span>
      <div>
        <el-table :data="editData" border size="small" max-height="700">
          <el-table-column label="操作人" prop="user" header-align="center" align="center" width="120" />
          <el-table-column label="操作时间" prop="editTime" header-align="center" align="center" width="120" />
          <el-table-column label="操作内容" prop="content" header-align="center" align="center" width="120" />
        </el-table>
      </div>
      <el-form-item style="margin-top:20px">
        <el-button type="primary" style="float:left;margin-left:20%" @click="cancel">取消</el-button>
        <el-button type="primary" style="float:right;margin-right:30%" @click="saveCard">提交</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
import { memberAjax } from 'Ajax'
export default {
  name: 'MemberCard',
  data() {
    return {
      show: false,
      detailStatus: true,
      pageTableData: [],
      editData:[
        {
          user: '商户1',
          editTime: '2021-04-25 11:36:30',
          content: '修改状态',
        },
        {
          user: '商户1',
          editTime: '2021-04-26 23:36:30',
          content: '修改状态',
        }
      ],
      queryData: {
        merchantName: '', // 会员名称
        merchantCode: '', // 会员卡号
        mobile: '', // 会员手机号
        status: '0',
        createTimeStart: '',
        createTimeEnd: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 11
      },
      setUpTime: [],
      ruleForm: {
        cardConfigDetail: [
          {
            defaultAmt: 1,
            giveAmt: 1
          },
          {
            defaultAmt: 2,
            giveAmt: 2
          },
          {
            defaultAmt: 3,
            giveAmt: 3
          }
        ],
        guideFlag: 'true'
      },
      rules: {
        defaultAmt1: [
          { required: true, message: '请输入默认金额1', trigger: 'blur' }
        ],
        defaultAmt2: [
          { required: true, message: '请输入默认金额2', trigger: 'blur' }
        ],
        defaultAmt3: [
          { required: true, message: '请输入默认金额3', trigger: 'blur' }
        ],
        guideFlag: [
          { message: '请选择是否引导注册', trigger: 'blur' }
        ]
      }
    }
  },
  mounted(){
  },
  methods:{
    onSubmit(){

    },
    cancel(){
      this.detailStatus = true
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    queryPageList() {
      if (this.setUpTime && this.setUpTime.length>0) {
        this.queryData.createTimeStart = this.setUpTime[0].toLocaleString()
        this.queryData.createTimeEnd = this.setUpTime[1].toLocaleString()
      }else{
        this.queryData.createTimeStart = ''
        this.queryData.createTimeEnd = ''
      }
      memberAjax.cardList(this.queryData).then(res =>{
        this.pageTableData = res.list
        this.queryData.totalCount = res.totalCount
      })
    },
    queryCard(row){
      this.detailStatus = false
       memberAjax.cardDetail({'id':row.id}).then(res =>{
        // this.memberDetail = res
        // this.memberDetail.resumeDiscount = res.resumeAmt + '/' +res.resumeCount
        // this.memberDetail.rechargeDiscount = res.rechargeAmt + '/' +res.rechargeCount
      })
    },
    saveCard(){
      memberAjax.cardSave(this.ruleForm).then(res => {
      })
    }
  }
}
</script>

<style scoped>
.el-col-24{
  width: 25%!important;
  height: 20%!important;
}
.title{
  padding-bottom: 20px;
  padding-top: 20px;
}
.detailForm .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
</style>
